<template>
	<view class="clause" style="" @click="click">
		<uni-icons v-show="show" type="checkmarkempty" :style="'color:'+iconcolor"></uni-icons>
	</view>
</template>

<script>
export default {
  props: ['iconcolor', 'show'],  // Props received by the component

  data() {
    return {
      show: this.show,  // Initial value from the "show" prop
    };
  },

  methods: {
    // Initialization logic can be placed in the mounted hook or directly in data
    init() {
      this.show = this.show;  // Initializing the show state
    },

    // Click handler to toggle the show value
    click() {
      this.show = !this.show;  // Toggle the value of "show"
      this.$emit('check-change', this.show);  // Emit the updated value
    },
  },

  watch: {
    show(newVal) {
      // Watching the show prop to handle any changes from the parent component
      this.show = newVal;
    },
  },

  mounted() {
    // Equivalent to Vue 3's `onMounted`
    this.init();
  },
};
</script>
<style>
.clause {
    display: inline-block;
    margin-left: 3px;
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    color: #fff;
    text-align: center;
    border: 1px solid #dcdde1;
}

</style>